<template>
	<view class="mako-panel" @tap="onClick">
		<view class="mako-panel-hd">
			<view class="mako-panel-title">
				<view class="mako-panel-title-name u-line-3">邮件号: {{ item.title }}</view>
				<view class="mako-panel-title-tag"><u-tag size="mini" text="未取" plain borderColor="#EAF7EC" color="#2AB447" bgColor="#EAF7EC"></u-tag></view>
			</view>
		</view>

		<view class="mako-panel-bd">
			<view class="mako-panel-bd-row">
				<view class="mako-panel-bd-row-title u-line-1">信息</view>
				<view class="mako-panel-bd-row-value">123132</view>
			</view>
			<view class="mako-panel-bd-row">
				<view class="mako-panel-bd-row-title u-line-1">信息</view>
				<view class="mako-panel-bd-row-value">123132</view>
			</view>
			<view class="mako-panel-bd-row">
				<view class="mako-panel-bd-row-title u-line-1">信息</view>
				<view class="mako-panel-bd-row-value">123132</view>
			</view>
		</view>

		<view class="mako-panel-action">
			<view class="mako-panel-action-left">
				<view class="mako-panel-action-right-text">{{ item.time }}</view>
			</view>
			<view class="mako-panel-action-right">
				<view class="mako-panel-action-right-btn">开箱</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'card',
	props: {
		item: {
			type: Object,
			default: () => {}
		}
	},
	// computed: {
	// 	infoPublishTime() {
	// 		if (this.item.infoPublishTime) {
	// 			let timestamp = new Date(this.item.infoPublishTime).getTime();
	// 			return uni.$u.timeFrom(timestamp);
	// 		} else {
	// 			return '';
	// 		}
	// 	},
	// },
	methods: {
		onClick() {
			this.$emit('click');
		}
	}
};
</script>

<style lang="scss" scoped>
.mako-panel {
	width: 100%;
	padding: 16rpx 0;
	&-hd {
		display: flex;
		.mako-panel-title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 16rpx;
			&-name {
				display: inline-block;
				font-size: 30rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #1b253a;
			}
			&-tag {
				font-weight: 400;
			}
		}
	}
	&-bd {
		padding-top: 8rpx;
		color: #586474;
		background: #f7f9fa;
		border-radius: 4px;
		padding: 24rpx;
		&-title {
			font-size: 28rpx;
			font-weight: 400;
			color: #1b253a;
			margin-bottom: 10rpx;
		}
		&-row {
			display: flex;
			&-title {
				min-width: 100rpx;
				color: #86909c;
			}
			&-value {
				flex: 1;
				color: #1b253a;
			}
		}
	}
	&-action {
		padding-top: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		&-left {
			&-text {
				// font-size: 24rpx;
				font-weight: 400;
				color: #86909c;
			}
		}
		&-right {
			&-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				width: 144rpx;
				height: 48rpx;
				background: linear-gradient(132deg, #186BFC 0%, #35A4FE 100%);
				border-radius: 4rpx;
			}
		}
	}
}
</style>
